<template>
  <div>
    <div style="margin-top: 20px;">
      <el-form label-width="70px" style="margin-left: 20px;">
        <el-row>
          <el-col :span="8">
            <el-form-item label="用户名称">
              <el-input style="width: 95%" v-model="loginLogVo.username" placeholder="用户名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作时间">
              <el-date-picker v-model="createTimes" type="datetimerange" range-separator="至" start-placeholder="开始时间"
                end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" style="margin-right: 10px;width: 100%;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button type="primary" plain icon="el-icon-search" @click="loginLogListPage()">搜索</el-button>
            <el-button type="success" plain icon="el-icon-refresh-left" @click="reset()">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <!-- 表格 -->
    <el-table v-loading="listLoading" :data="list" border style="width: 100%;margin-top: 10px;">
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名称" />
      <el-table-column prop="ipaddr" label="登录IP" />
      <el-table-column prop="status" label="状态" :formatter="playbackFormat" />
      <el-table-column prop="msg" label="消息" />
      <el-table-column prop="createTime" label="创建时间" width="350" />
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination background @current-change="currentChange" @size-change="sizeChange" :page-sizes="[5, 10, 15, 20]"
        :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total"
        style="padding: 30px 0; text-align: center;">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import api from '@/api/system/sysLog/sys-login-log'
export default {
  data() {
    return {
      listLoading: true, //加载动画
      list: [],
      page: 1,
      limit: 5,
      loginLogVo: {},
      total: 0,
      createTimes:[]
    }
  },
  created() {
    this.loginLogListPage();
  },
  methods: {
    loginLogListPage() {
      if (this.createTimes && this.createTimes.length === 2) {
        this.loginLogVo.createTimeBegin = this.createTimes[0]
        this.loginLogVo.createTimeEnd = this.createTimes[1]
      }
      api.loginLogListPage(this.page, this.limit, this.loginLogVo).then(res => {
        console.log(res)
        this.list = res.data.records
        this.total = res.data.total
        this.listLoading = false;
      })
    },
    playbackFormat(row, colum) {
      if (row.status === 1) {
        return '成功'
      } else {
        return '失败'
      }
    },
    // 分页参数变化
    sizeChange(size) {
      this.limit = size
      this.loginLogListPage()
    },
    // 分页参数变化
    currentChange(current) {
      this.page = current;
      this.loginLogListPage();
    },
    //重置
    reset(){
      this.loginLogVo = {}
      this.loginLogListPage();
      this.createTimes = []
    }
  }
}
</script>

<style>

</style>